<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'edit_sys_user_info.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="${ctx }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx }/css/font-awesome.css?v=4.4.0" rel="stylesheet">

<!-- jqgrid-->
<link href="${ctx }/css/plugins/jqgrid/ui.jqgrid.css?0820"
	rel="stylesheet">

<link href="${ctx }/css/animate.css" rel="stylesheet">
<link href="${ctx }/css/style.css?v=4.1.0" rel="stylesheet">
<link
	href="${ctx}/css/plugins/bootstrap-select/bootstrap-select.min.css"
	rel="stylesheet" />
<!-- bootstrap-switch css -->
<link href="${ctx }/css/plugins/bootstrap-switch/bootstrap-switch.css"
	rel="stylesheet">
<link rel="stylesheet" href="${ctx}/js/plugins/layui/css/layui.css" media="all">
<style type="text/css">
body {
	background: none;
}
.layui-upload-img {
    width: 92px;
    height: 92px;
    margin: 0 10px 10px 0;
}

</style>
</head>
<body>

	<div class="inmodal" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated bounceInRight">
				<div class="modal-header">
					<button type="button" class="close closeWin" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
					</button>
					<h5 class="modal-title">编辑元件配置</h5>
				</div>
				<div class="ibox-content">
					<form class="form-horizontal m-t" name="editComponentFrom"
						id="editComponentFrom">
						<input type="hidden" name="pk_component_id" id="pk_component_id"
							value="${monit_component_base.pk_component_id}">
						<div class="form-group">
							<label class="col-sm-3 control-label">元件名称：</label>
							<div class="col-sm-8">
								<input id="component_name" name="component_name"
									class="form-control" required="" aria-required="true"
									type="text" value="${monit_component_base.component_name}">
							</div>
						</div>
						<div class="form-group">
							<input type="hidden" name="component_img" id="component_img">
							<input type="hidden" name="component_img_url"
								id="component_img_url"> <label
								class="col-sm-3 control-label">图片：</label>
							<div class="col-sm-8">
								<img class="layui-upload-img" id="upload-normal-img" src="data:image\/(png|jpg);base64,${img}">
								<p id="test-upload-demoText"></p>
								<button type="button" class="layui-btn" id="upload">
									<i class="layui-icon">&#xe67c;</i>上传图片
								</button>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">业务场景：</label>
							<div class="col-sm-8">
								<select class="selectpicker" required="" aria-required="true"
									name="pk_scene_id" id="pk_scene_id">
									<option value="">--请选择--</option>
									<c:forEach items="${list}" var="sceneInfo">
										<option value="${sceneInfo.pk_scene_id}"
											<c:if test="${monit_component_base.pk_scene_id eq sceneInfo.pk_scene_id }">selected</c:if>>${sceneInfo.scene_name}</option>
									</c:forEach>
								</select>
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-8 col-sm-offset-3">
								<button type="button" class="btn btn-white closeWin"
									data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">保存</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
	<!-- 全局js -->
	<script src="${ctx }/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx }/js/bootstrap.min.js?v=3.3.6"></script>

	<!-- Peity -->
	<script src="${ctx }/js/plugins/peity/jquery.peity.min.js"></script>

	<!-- jqGrid -->
	<script src="${ctx }/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
	<script src="${ctx }/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>

	<!-- jQuery Validation plugin javascript-->
	<script src="${ctx }/js/plugins/validate/jquery.validate.min.js"></script>
	<script src="${ctx }/js/plugins/validate/messages_zh.min.js"></script>

	<!-- layer javascript -->
	<script src="${ctx }/js/plugins/layer/layer.min.js"></script>
	<script src="${ctx }/js/plugins/layui/layui.js"></script>

	<!-- jQuery form-->
	<script src="${ctx }/js/jquery.form.js"></script>

	<!-- 自定义js ---->
	<script src="${ctx }/js/content.js"></script>
	<script src="${ctx }/js/plugins/layer/laydate/laydate.js"></script>
		<script src="${ctx }/js/jquery.base64.js"></script>
	<script
		src="${ctx}/js/plugins/bootstrap-select/bootstrap-select.min.js"></script>
	<!-- bootstrap-switch js -->
	<script src="${ctx }/js/plugins/bootstrap-switch/bootstrap-switch.js"></script>
	<script type="text/javascript">
		//绑定修改表单提交事件,异步提交表单
		$('.closeWin').click(function() {
			window.parent.editWinClose('1');
		});
		$("#editComponentFrom").submit(function() {
			$.ajax({
				type : "post",
				url : "${ctx }/component/doEditComponent",
				data : $('#editComponentFrom').serialize(),
				datatype : "json",
				success : function(data) {
					if (data.errcode == '0') {
						layer.alert(data.errmsg, {
							icon : 1
						}, function(index) {

							window.parent.editWinClose('0');
							//关闭提示框
						});
					} else {
						layer.alert("保存失败！", {
							icon : 2
						});
					}
				}
			});

			return false;
		});
		layui.use('upload', function(){
	        var upload = layui.upload;
	        //执行上传
	        var uploadInst = upload.render({
	            elem: '#upload' //绑定元素
	            ,url: '${ctx}/component/upload' //上传接口
	            ,method: 'POST'
	            ,accept: 'images'
	            ,size:20000                 
	            ,before: function(obj){
	                layer.load();
	                //预读本地文件示例，不支持ie8
		            obj.preview(function(index, file, result){
		              $('#upload-normal-img').attr('src', result); //图片链接（base64）
		              $('#component_img').val(result.replace(/^data:image\/(png|jpg);base64,/, ""));
		            });
	            }
	            ,done: function(res){//上传完毕回调
	                layer.closeAll('loading');
	                $("#component_img_url").val(res.imgUrl);
	                layer.alert(res.errmsg, {
						icon : res.errcode
					});
	            }
	            ,error: function(){//请求异常回调
	                layer.closeAll('loading');
	                layer.msg('网络异常，请稍后重试！');
	            }
	        });
	    });
		
	
	</script>
</body>
</html>
